<!--
	作者：318363149@qq.com
	时间：2017-09-26
	描述：
	以后项目的根组件
-->
<template>
	<!--主要是放HTML元素的（HTML的页面结构）-->
	<div>
		<!--1.0利用mint-ui中的header组件实现整个系统的头部-->
		<mt-header fixed title="test Vue商城系统"></mt-header>
		<!--利用vue-router的<router-view>进行占位-->
		<router-view>
			
		</router-view>
			
		<!--3.0利用mui中的tabbar组件实现系统 的底部-->
		<nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item" to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item" to="/tabbar-with-chat">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link class="mui-tab-item" to="/shopCar">
				<span class="mui-icon mui-icon-contact"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item" to="/tabbar-with-map">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">搜索</span>
			</router-link>
		</nav>
	</div>
</template>

<script>
	
	//导入提示框
	import { Toast } from 'mint-ui';
	
	//负责导出.vue这个组件对象，（它的本质上是一个Vue对象，所以vue中该定义的元素都可以使用）
//	function add(x , y){ console.log(x+y)}
	export default {
		data(){   //等价于  data：function(){}
			return {
				
			}
		},
		
		created(){
			
		}
	}
</script>

<style scoped>
	/*当前页面的 css样式，其中scoped 表示这个里面写的css代码只是在当前组件页面上有效，不会影响其他组件的页面*/
	
</style>